/**
  续租订单，租客提交，待房东确认
  public static final int1 NEW_ORDER_STATUS_0 =0;
  租客提交，待房东确认
  public static final int NEW_ORDER_STATUS_1 =1;
  房东已取消
  public static final int NEW_ORDER_STATUS_2 =2;
  房东已签约，待租客签约
  public static final int NEW_ORDER_STATUS_3 =3;
  待租客支付
  public static final int NEW_ORDER_STATUS_4 =4;
  租客支付成功
  public static final int NEW_ORDER_STATUS_5 =5;
  订单关闭
  public static final int NEW_ORDER_STATUS_99 = 99;
  public static final int CONTRACT_STATUS_1 = 1; 合同状态 1 暂存 房东已签，租客待签
  public static final int CONTRACT_STATUS_2 = 2; 合同状态 2 生效 双方已签
  public static final int CONTRACT_STATUS_3 = 3; 合同状态 3 废除 解除合同
  public static final int CONTRACT_STATUS_4 = 4; 合同状态 4 续约中
  public static final int CONTRACT_STATUS_5 = 5; 合同状态 5 退租中
 */
<template>
  <div class="OrderForRenter actWrap">
    <nodata v-show="noData"></nodata>
    <div class="li-zkdd" v-for="(item, i) in orderList">
      <div class="status">
        <span class="left">{{ orderType2txt(item.orderType) + ' ' + statu2txt(item.status) }}</span>
        <span class="right" v-if="statu2txtBtn(item.status, true)">
        <!-- <span class="right"> -->
          <span class="tip" v-if="item.status === 3">
            {{`去签约 (还剩`}}
            <clocker :time="item.contractExepireTime" @on-finish="refresh" format="%M分%S秒"></clocker>
            {{`)`}}
          </span>
          <!-- <span class="tip">{{ `去签约&nbsp;${stamp2Minitu(item.exepireTime)}` }} </span> -->
          <span class="tip" v-if="item.status === 4">
            <!-- {{ `(请在当天23点前支付，过期将失效)` }} -->
            {{`去付款 (还剩`}}
            <clocker :time="item.exepireTime" @on-finish="refresh" format="%H小时%M分%S秒"></clocker>
            {{`)`}}
          </span>
          <!-- {{ '还剩' + updateDeadline(1513335182000).deadline }}  -->
          <img v-if="statu2txtBtn(item.status, true)" src="../../../images/arrow.png" alt="">
        </span>
      </div>
      <!-- 跳转有问题 -->
      <!-- <house-list :houseInfo="item.housePerson" detailPath="item.status === 'isFalse' ? `payDetail/?type=order&serviceId=${item.id}` : ''" :key="i" :twoLable="true"  v-if="item.housePerson">
      </house-list> -->  

      <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="item.houseType === 2 ? '/apartmentDetail' : '/detail'" :key="i">
      </house-list>

      
      
      <div class="btn-container clearfix">
        <span v-if="item.status === 0 || item.status === 1" slot="BTaction" class="OrderForRenter-ong btn-up" @click.stop="qxsq(item.id)">取消申请</span>
        <span v-if="item.status === 3" slot="BTaction" class="OrderForRenter-ong btn-up" @click.stop="queryOrderDetail4Renter(item.id, item.contractId, item.houseType)">去签约</span>
        <router-link v-if="item.status === 4" tag="span" :to="{path: '/payDetail', query: {serviceId: item.id}}" slot="BTaction" class="OrderForRenter-ong btn-up" @click.stop="pay(item.id)">立即支付</router-link>
        <span v-if="item.status === 5" slot="BTaction" class="OrderForRenter-ong btn-up" @click.stop="queryOrderDetail4Renter(item.id, item.contractId, item.houseType, item.status)">合同详情</span>
        <span slot="BTaction" class="OrderForRenter-ong btn-gray" @click.stop="contactLandlor(item.landlordId)">联系房东</span>
      </div>
    </div>
    <payment v-model="paymentShow" :payInfo="payInfo"></payment>
    <!-- <xdialog v-show="false"></xdialog> -->
    <div v-show="showDialog" class="v_show_contract" :class="{'tips-dialog': true}">
      <section class="tips-dialog render__contract__dialog">
        <div class="body">
          <contract :contractDetail="orderInfo"/>
          <x-button v-if ="btnstatus == 5" type="primary" @click.native="btnclick">关闭</x-button>
          <x-button v-else type="primary" @click.native="signContract4Renter">同意签约</x-button>
        </div>
     <div class="btn-close" @click="showDialog = false"></div>
      </section>
    </div>
  </div>

</template>

<script>
  import contract from '@/components/contract'
  import houseList from '@/components/houseList'
  import Payment from '@/components/Payment'
  import xdialog from '@/components/x-dialog'
  import xdialogpay from '@/components/x-dialog-pay'
  import { Clocker, Confirm, TransferDomDirective as TransferDom } from 'vux'

  export default {
    name: 'list-of-the-rent',
    directives: {
      TransferDom
    },
    components: {
      contract,
      houseList,
      Payment,
      xdialog,
      xdialogpay,
      Clocker,
      Confirm
    },
    data () {
      return {
        showDialog: false, // 签约提示弹窗
        contractId: '', // 订单id
        orderList: [],
        paymentShow: false,
        payInfo: '',
        actionBtn: false,
        submitDisable: false,
        deadline: '',
        countdown: 60,
        noData: false,
        isTrue: false,
        btnstatus: '',
        orderInfo: {
          housePersons: {},
          landlord: {},
          order: {},
          render: {},
          apartment: {},
          romm: {},
          renter: {
            mobile: '',
            trueName: ''
          }
        },
        houseType: 1
      }
    },
    created () {
      // this.orderList = this.testData
      this.init()
    },
    methods: {
      init () {
        let _this = this
        let data = {page: 1, pageSize: 100}
        this.$axiosPosting(this.$api.myOrderForRenter, data).then(res => {
          if (res.code === '0000') {
            if (res.data.length <= 0) {
              (this.noData = true) && this.$vux.toast.text('无订单数据')
            } else {
              // 处理公寓房源数据
              let orderList = res.data
              for (let x in orderList) {
                if (orderList[x].houseType === 2 && orderList[x].apartment && orderList[x]) {
                  let apartment = orderList[x].apartment
                  let room = orderList[x].room
                  let housePerson = {
                    id: apartment.id,
                    coverImg: apartment.cover,
                    houseTitle: room.buildingName + room.roomName,
                    address: apartment.address,
                    createTime: apartment.createTime,
                    rentalPrice: orderList[x].money
                  }
                  orderList[x]['housePerson'] = housePerson
                }
              }
              _this.orderList = orderList
              console.log(orderList)
              this.noData = false
              this.$nextTick(() => {
                document.body.scrollTop = 0
              })
            }
          }
        })
      },
      // 签约
      signContract4Renter () {
        let _this = this
        let signContractApi = this.houseType === 1 ? this.$api.signContract4Renter : this.$api.signContract4Apartment
        this.$axiosPosting(signContractApi, {
          contractId: this.contractId
        }).then(json => {
          if (json.code === '0000') {
            this.$vux.toast.show({
              type: 'text',
              text: '签约成功',
              time: 15000
            })
            window.setTimeout(() => {
              _this.showDialog = false
              document.body.scrollTop = 0
              _this.init()
            }, 1500)
          }
        })
      },
      btnclick () {
        let _this = this
        _this.showDialog = false
        document.body.scrollTop = 0
      },
      queryOrderDetail4Renter (id, contractId, houseType, status) {
        this.btnstatus = status     // 按钮状态
        this.houseType = houseType
        this.contractId = contractId
        this.showDialog = true
        this.$axiosPosting(this.$api.queryOrderDetail4Renter, {
          orderId: id
        }).then(json => {
          if (json.code === '0000') {
            let orderData = json.data
            if (!orderData.renter) {
              orderData['renter'] = {
                mobile: '***********',
                trueName: ''
              }
            }
            if (houseType === 2) {
              let apartment = orderData.apartment
              let room = orderData.romm
              let housePerson = {
                id: apartment.id,
                coverImg: apartment.cover,
                houseTitle: room.buildingName + room.roomName,
                address: apartment.address,
                createTime: apartment.createTime
              }
              orderData['housePersons'] = housePerson
            }
            this.orderInfo = orderData
            if (!this.orderInfo.apartment) this.orderInfo.apartment = {}
            if (!this.orderInfo.romm) this.orderInfo.romm = {}
            if (!this.orderInfo.renter) this.orderInfo.renter = {}
            if (!this.orderInfo.render) this.orderInfo.render = {}
            if (!this.orderInfo.housePersons) this.orderInfo.housePersons = {}
          }
        })
      },
      stamp2Minitu (exepireTime) {
        let txt = ''
        let stime = exepireTime
        let diffMin = 0
        // let seconds = 0
        let st = +stime - Date.parse(new Date()) // 转化ms 为 s
        if (st > 0) {
          st = st / 1000
          diffMin = (st / 60).toFixed(0)
          // seconds = (st % 60).toFixed(0)
        }
        txt = `还剩${diffMin}分`
        // window.setInterval(this.stamp2Minitu(exepireTime), 1000)
        return txt
      },
      // 更新时间
      updateDeadline (exepireTimestamp) {
        let deadline = ''
        let submitDisable = false
        let et = exepireTimestamp
        let st = window.setInterval(() => {
          let timestamp = et - Date.now()
          timestamp = timestamp >= 0 ? timestamp : 0
          deadline = new Date(timestamp).Format('mm:ss')
          if (timestamp > 0) {
            this.submitDisable = false
          } else {
            this.submitDisable = true
            window.clearInterval(st)
          }
        }, 1000)
        return {deadline, submitDisable}
      },
      // 取消订单签约
      qxsq (id) {
        this.$axiosPosting(this.$api.updateOrderStatus, {id, status: '99'}).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('订单取消成功')
            this.init()
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      },
      pay (serviceId) {
        this.paymentShow = true
        this.payInfo = {type: 'order', serviceId: serviceId}
      },
      // 签约
      QianYue (id) {
        this.queryOrderDetail4Renter(id)
        this.showDialog = true
      },
      signContract (id) {
        this.queryOrderDetail4Renter(id)
      },
      // 倒计时页面刷新
      refresh () {
        this.init()
        // this.$forceUpdate()
      },
      statu2txt (i) {
        let txt = ''
        i = +i
        if (i === 1) txt = '等待房东确认'
        else if (i === 0) txt = '等待房东确认'
        else if (i === 2) txt = '房东已取消'
        else if (i === 3) txt = '待签约'
        else if (i === 4) txt = '待付款'
        else if (i === 5) txt = '支付成功'
        else if (i === 99) txt = '订单关闭'
        return txt
      },
      orderType2txt (i) {
        let txt = ''
        i = +i
        if (i === 2) txt = '续租订单'
        else if (i === 3) txt = '退租订单'
        return txt
      },
      statu2txtBtn (i, show = false) {
        let txt = ''
        let visible = false
        if (i === 3) {
          this.actionBtn = true
          visible = true
          txt = '签约'
        }
        if (i === 4) {
          this.actionBtn = true
          visible = true
          txt = '支付'
        }
        if (show) {
          return visible
        } else {
          return txt
        }
      },
      action (item) {
        console.log(item)
        if (item.status === 3) {
          this.getSignContractUrl(item.contractId)
        }
        if (item.status === 4) {
          this.pay(item.id)
        }
      },
      getSignContractUrl (contractId) {
        let data = {contractId}
        this.$axiosPosting(this.$api.getSignContractUrl, data).then(res => {
          if (res.code === '0000') {
            window.location.href = res.data.signUrl
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      },
      // 合同详情
      htxq (contractId) {
        let data = {contractId}
        this.$axiosPosting(this.$api.getFileDetailUri, data).then(res => {
          this.$axiosPosting(this.$api.getFileDetailUri, data).then(res => {
            if (res.code === '0000') {
              window.location.href = res.data.fileDetailUri
            }
          })
        })
      },
      // 联系房东
      contactLandlor (landlordId) {
        let virtualNum = ''
        let mobileTo = ''
        this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
          if (res.code === '0000') {
            mobileTo = res.data.mobile
            step2()
          }
        })
        const step2 = () => {
          let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
          let mobileFor = userInfo ? userInfo.mobile : ''
          if (mobileFor) {
            if (virtualNum === '') {
              this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
                let data = ''
                if (res.code === '0000') {
                  data = JSON.parse(res.data)
                }
                if (res.code === '0000' && data.errorCode === '0') {
                  virtualNum = data.virtualNum
                  window.location.href = `tel:${virtualNum}`
                } else {
                  this.$vux.toast.text('无法获取房东电话')
                  virtualNum = ''
                }
              })
            } else {
              window.location.href = `tel:${virtualNum}`
            }
          } else {
            this.$router.replace('/login')
          }
        }
      }
    },
    beforeRouteLeave (to, from, next) {
      if (to.path !== '/payDetail' && to.name !== 'detail') {
        this.isTrue = true
      }
      next()
    },
    destroyed () {
      // if (this.isTrue) {
      //   this.$router.replace('/user')
      // }
    }
  }
</script>
<style lang="less" scoped>

  .OrderForRenter-ong{
    float: right;
    margin-top: 13px;
    padding: 0 10px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ff9600;
    color: #fff;
    height: 23px;
    line-height: 24px;
  }
  .btn-up {
    margin-left: 10px;
    color: #ff9600;
  }
  .tip {
    font-size: 13px;
  }
  .btn-gray {
    border: 1px solid #777777;
    color: #777777;
    background: white;
  }
  .li-zkdd {
    font-size: .7rem;
    border-bottom: 6px solid #F3F3F3;
    .status {
      padding: 0 18px;
      height: 1.8rem;
      line-height:  1.8rem;
      border-bottom: 1px solid #F3F3F3;
      .right {
        float: right;
        img {
          height: .7rem;
          position: relative;
          top: .1rem;
        }
      }
    }
  }
  .btn-container {
    position: relative;
    height: 52px;
    padding-right: 15px;
    &:before {
      content: '';
      position: absolute;
      bottom: 53px;
      left: 0;
      right: 0;
      border-bottom: 1px solid #F3F3F3;
    }
  }
</style>
<style lang="less">
.v_show_contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  min-height: 100vh;
  height: auto !important;
  overflow-y: auto !important;
  background: white;
}
.vux-x-dialog{
position: relative;
}
.OrderForRenter {
  .house {
    padding: 18px 18px 16px 0;
    
  }
  .label {
    span:nth-child(3) {
      display: none;
    }
    @media screen and (max-width: 350px) {
      span:nth-child(2) {
        display: none;
      }
    }
  }
  .tips-dialog {
    height: 100%;
    .header {
      padding: 30px 0 20px;
      font-size: 24px;
      line-height: 1;
      color: #000;
      text-align: center;
    }
    .body {
      padding: 0 15px 15px;
      p {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.6;
        color: #777;
        text-align: left;
      }
      .weui-btn {
        margin-top: 20px;
      }
    }
  }
  .tips-dialog, .confirm-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .btn-close {
      position: absolute;
      // bottom: -60px;
      top: 1rem;
      right:1rem;
      width: 1.8rem;
      height: 1.8rem;
      margin-left: -0.9rem;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
      z-index: 9999;
    }
  }
}

</style>
<style lang="less">
.render__contract__dialog {
  min-height: 100vh !important;
  overflow-y: auto !important;
  .weui-dialog {
    width: 98vw !important;
    max-width: 100vw!important;
  //  position: absolute;
  //  overflow: auto;
    height: 100%;
    overflow: scroll !important;
    max-width: 100;

  }
}
</style>
